<template>
  <el-container class="el-container">
    <el-main>
      <el-header class="el-header">
        <img class="logo" src="@/assets/logo.png">
      </el-header>
      <el-card class="el-card">
        <el-form :model="registerParams" :rules="registerRule">
          <el-form-item prop="phoneNumber">
            <el-input
              name="phoneNumber"
              type="text"
              autocomplete="off"
              placeholder="请输入手机号"
              v-model="registerParams.phoneNumber"
              oninput ="value=value.replace(/[^\d]/g,'')"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :model="registerParams" :rules="registerRule">
          <el-form-item prop="verificationCode">
            <el-input
              name="verificationCode"
              type="text"
              autocomplete="off"
              placeholder="请输入验证码"
              v-model="registerParams.verificationCode"
            >
              <template #append>
                <el-button class="ver-code">获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :model="registerParams" :rules="registerRule">
          <el-form-item prop="userName">
            <el-input
              name="userName"
              type="text"
              autocomplete="off"
              placeholder="请输入账号"
              v-model="registerParams.userName"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :model="registerParams" :rules="registerRule">
          <el-form-item prop="password">
            <el-input
              name="password"
              type="text"
              autocomplete="off"
              placeholder="请输入密码"
              show-password
              v-model="registerParams.password"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-form :model="registerParams" :rules="registerRule">
          <el-form-item prop="password1">
            <el-input
              name="password1"
              type="text"
              autocomplete="off"
              placeholder="请再次输入密码"
              show-password
              v-model="registerParams.password1"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <el-form-item>
          <el-button
            class="register"
            type="primary"
            plain="true"
            :loading="loading"
            @click="register">
            注册
          </el-button>
          <el-button class="login"
            @click="relogin">
            登录
          </el-button>
        </el-form-item>
      </el-card>
    </el-main>
  </el-container>
</template>

<script lang="ts" src="./register.ts"></script>

<style scoped>
.el-container{
  position: absolute;
  width: 390px;
  margin-left: 560px;
  margin-top: 73px;
}
.el-header{
  background: #003399;
}
.logo{
  width: 80px;
  padding-right: 270px;
  padding-top: 10px;
}
.ver-code{
  color: #003399;
  background: rgba(255,255,255,0);
  font-size: 3px;
}
.register{
  background: #003399;
  color: #FFFFFF;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}
.login{
  background: #003399;
  color: #FFFFFF;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

</style>
